<template>
  <!-- 新增外层容器：控制整个页面背景 -->
  <div class="page-container">
    <div class="header">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-col :span="18">
          <el-form-item>
            <el-select clearable v-model="form.status" placeholder="请选择工单状态">
              <el-option label="待接单" value="待接单"></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="form.type" placeholder="请选择工单类型">
              <el-option label="安装" value="安装"></el-option>
              <el-option label="维修" value="维修"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="toSearch" type="primary">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-form>
      <!-- 第二行：表格外层新增容器，单独设置背景 -->
      <div class="table-container">
        <el-table :data="orderData" stripe style="width: 100%" class="custom-table">
          <el-table-column type="index" :index="1" label="序号" width="180" align="center"></el-table-column>
          <el-table-column prop="engineer_name" label="工程名称" width="180" align="center"></el-table-column>
          <el-table-column prop="device_name" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="bill_why" label="问题描述" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template v-slot="scope">
              <div>
                <el-tag v-if="scope.row.status == '已完成'">已完成</el-tag>
                <el-tag v-else-if="scope.row.status == '进行中'" type="warning">进行中</el-tag>
                <el-tag v-else type="danger">待接单</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="工单类型" align="center">
            <template v-slot="scope">
              <div>
                <el-tag v-if="scope.row.type == '维修'">维修</el-tag>
                <el-tag v-else type="warning">安装</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template v-slot="scope">
              <div>
                <el-link @click="toBind(scope.row)" style="margin-right: 10px;" :underline="false" type="success">详情</el-link>
                <el-link style="margin-right: 10px;" @click="toDelete(scope.row.id)" :disabled="scope.row.status == '待接单' || scope.row.status == '进行中'" :underline="false" type="success">删除</el-link>
                <el-link @click="toCancel(scope.row.id)" :disabled="scope.row.status == '已完成' || scope.row.status == '进行中'" :underline="false" type="success">取消</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页区域：添加背景与内边距 -->
    <div class="page" style="margin-top: 10px; background-color: #f0d9e8; padding: 10px; border-radius: 8px;">
      <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.page" :page-sizes="[5, 8, 10, 20]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { get, del } from '@/utils/request'
export default {
  data() {
    return {
      form: {},
      deviceData: [],
      params: { page: 1, pageSize: 10 },
      activeNames: ['1'],
      orderData: [],
      total: 0
    }
  },
  methods: {
    toDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await del('/workorder/deleteById', { id });
        this.$message({ type: 'success', message: '操作成功!' });
        this.params.page = 1;
        this.getWorkerData();
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' });
      });
    },
    toCancel(id) {
      this.$confirm('是否取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await get('/workorder/cancelOrder', { id });
        this.$message({ type: 'success', message: '操作成功!' });
        this.params.page = 1;
        this.getWorkerData();
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消操作' });
      });
    },
    toBind(row) {
      this.$router.push({ path: '/am/order/Details?id', query: row });
    },
    toSearch() {
      this.params.page = 1;
      this.getWorkerData();
    },
    async getWorkerData() {
      let temp = { ...this.params, ...this.form };
      let res = await get('/workorder/pageQuery', temp);
      this.orderData = res.data.list;
      this.total = res.data.total;
    },
    async getDevData() {
      let temp = { ...this.form, ...this.params };
      let res = await get('/workorder/pageQuery', temp);
      this.deviceData = res.data.list;
    },
    handleChange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getWorkerData();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getWorkerData();
    },
  },
  created() {
    this.toSearch();
    this.getDevData();
    this.getWorkerData();
  }
}
</script>
<style lang="scss" scoped>
// 1. 页面整体背景（浅粉紫，覆盖全屏）
.page-container {
  background-color: #f9eaf2;
  min-height: 100vh;
  padding: 20px;
}

// 2. 表格外层容器（稍深粉紫，与整体区分，增加层次感）
.table-container {
  background-color: #f0d9e8;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
}

// 3. 表格内部背景（白色，保证文字清晰，抵消stripe默认条纹的模糊感）
::v-deep .custom-table {
  background-color: #fff;
}

// 4. 优化表格条纹样式（浅粉紫条纹，与整体风格统一）
::v-deep .custom-table .el-table__row--striped {
  background-color: #fcf0f7;
}
</style>